<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>讯飞语音识别</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>讯飞实时语音识别与翻译</h1>
        </header>
        
        <main>
            <div class="recognition-box">
                <div class="result-section">
                    <h3>语音识别结果 (<span id="source-lang">中文</span>)</h3>
                    <div id="result-container" class="result-container">
                        <p id="final-result" class="result-text">识别结果将显示在这里...</p>
                        <p id="temp-result" class="result-text temp"></p>
                    </div>
                </div>
                
                <div class="result-section">
                    <h3>翻译结果 (<span id="target-lang">英文</span>)</h3>
                    <div id="translation-container" class="result-container">
                        <p id="final-translation" class="result-text">翻译结果将显示在这里...</p>
                        <p id="temp-translation" class="result-text temp"></p>
                    </div>
                </div>
                
                <div class="controls">
                    <button id="mic-button" class="mic-button">
                        <span class="mic-icon">🎤</span>
                        <span class="mic-text">点击开始录音</span>
                    </button>
                    <button id="system-audio-button" class="system-audio-button">
                        <span class="system-audio-icon">🔊</span>
                        <span class="system-audio-text">电脑音频</span>
                    </button>
                    <button id="switch-lang-button" class="switch-lang-button">
                        <span class="switch-lang-icon">🔄</span>
                        <span class="switch-lang-text">中译英</span>
                    </button>
                    <div id="status-indicator" class="status-indicator"></div>
                </div>
                
                <div class="debug-info">
                    <h3>调试信息</h3>
                    <div id="debug-container">
                        <p id="audio-status">音频状态: 未初始化</p>
                        <p id="ws-status">WebSocket状态: 未连接</p>
                        <p id="sample-rate">采样率: 未知</p>
                        <p id="audio-source">音频源: 无</p>
                        <p id="translation-direction">翻译方向: 中译英</p>
                    </div>
                </div>
            </div>
        </main>
        
        <footer>
            <p>基于讯飞实时语音转写API和翻译API</p>
        </footer>
    </div>
    
    <script src="js/app.js"></script>
</body>
</html>